<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="UTF-8"/>
        <title>发送邮件</title>
        <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
        <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
        <script th:href="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

    </head>
    <body>
        <div class="col-md-6" style="margin:20px;padding:20px;border: #E0E0E0 1px solid;">
            <form class="form-horizontal" id="mailForm" >
                <div class="form-group">
                    <label class="col-md-2 control-label">邮件发信人:</label>
                    <div class="col-md-6">
                        <input class="form-control" id="sender" name="sender" th:value="${sender}" readonly="readonly">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">邮件收信人:</label>
                    <div class="col-md-6">
                        <input class="form-control" id="receiver" name="receiver" title="多个邮箱使用,隔开">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">邮件主题:</label>
                    <div class="col-md-6">
                        <input class="form-control" id="theme" name="theme">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">邮件内容:</label>
                    <div class="col-md-6">
                        <textarea class="form-control" id="mailContent" name="mailContent" rows="5"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">邮件附件:</label>
                    <div class="col-md-6">
                        <input class="form-control" id="files" name="files" type="file" multiple="multiple">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">邮件操作:</label>
                    <div class="col-md-3">
                        <a class="form-control btn btn-primary" onclick="sendMail()">发送邮件</a>
                    </div>
                    <div class="col-md-3">
                        <a class="form-control btn btn-default" onclick="clearForm()">清空</a>
                    </div>
                </div>
            </form>
        </div>
        <script th:inline="javascript">
            var appCtx = [[${#request.getContextPath()}]];
            function sendMail() {
                var formData = new FormData($('#mailForm')[0]);
                $.ajax({
                    url: appCtx + '/send_mail',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        alert(result.status === 'ok' ? "发送成功！" : "发送邮件出现未知异常！：" + result.error);
                    },
                    error: function () {
                        alert("发送失败！");
                    }
                });
            }

            function clearForm() {
                $('#mailForm')[0].reset();
            }
        </script>
    </body>
</html>